<template>
  <div>
    <!--        头部-->
    <div class="bike-head">
      <div class="bike-name" @click="toIndex">自行车租赁平台</div>
      <div class="bike-search">
        <input type="text" v-model="searchWorld" placeholder="请输入关键词" />
        <div class="search-button" @click="toSearch">搜索</div>
        <div class="bikeKindList">
          <ul>
            <li>热门类别：</li>
            <li
              v-for="(item,index) in kindList"
              :key="index"
              @click="selectKind(item.value)"
            >{{item.value}}</li>
          </ul>
        </div>
      </div>
      <div class="user-info" v-if="userInfo2 && userInfo2.username">
        <div>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
        <div @click="userCenter">{{userInfo2.username}}</div>
        <div>
          <el-button size="mini" @click="exit">退出</el-button>
        </div>
      </div>
      <div class="user-info" v-else>
        <div>
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </div>
        <div @click="login">登录/注册</div>
      </div>
    </div>
  </div>
</template>

<script>
import config from "./../../config/index";
import { kindList } from "../../data/index";
import { mapState } from "vuex";
export default {
  name: "userHeader",
  data() {
    return {
      searchWorld: "",
      kindList: kindList
    };
  },
  mounted() {
    // eslint-disable-next-line no-console
    console.log(this.userInfo2, "userInfo2");
  },
  computed: {
    ...mapState(["userInfo2"])
  },
  methods: {
    login() {
      this.$router.push({ path: "/login" });
    },
    exit() {
      config.delCache("userInfo");
      this.$store.dispatch("delUserInfo2");
      this.$router.replace({ path: "/login" });
    },
    toIndex() {
      this.$router.push({ path: "/user/home" });
    },
    userCenter() {
      this.$router.push({ path: "/user/mine" });
    },
    toSearch() {
      this.$router.push({
        path: `/user/search?title=${this.searchWorld}`,
      });
    },
    selectKind(kind) {
      this.$router.push({
        path: `/user/search?kind=${kind}`,
      });
    }
  }
};
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
.bike-head {
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .bike-name {
    font-size: 18px;
    cursor: pointer;
  }

  .bike-search {
    position: relative;
    width: 25%;
    height: 40px;

    input {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      border: 1px solid #ccc;
      padding-left: 15px;
    }

    .search-button {
      position: absolute;
      right: 0;
      top: 50%;
      width: 20%;
      height: 100%;
      line-height: 40px;
      text-align: center;
      color: #fff;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      background-color: #49AF4F;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .bikeKindList {
      width: 100%;
      height: 33px;
      line-height: 30px;
    }

    ul {
      height: 100%;
      overflow: hidden;
    }

    ul li {
      float: left;
      margin-right: 10px;
      font-size: 13px;
      cursor: pointer;
    }

    ul li:hover {
      color: green;
    }
  }

  .user-info {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    cursor: pointer;

    .el-avatar--circle {
      width: 35px;
      height: 35px;
      vertical-align: middle;
      cursor: pointer;
    }

    div {
      padding-left: 10px;
    }
  }
}
</style>
